<template>
	<div>
		<h2 data-v-034e6e73="" id="svgImage">
			Ruler 刻度尺 <img @click="jump('api','smooth')" data-v-abf2c1f6="" style="width: 32px;height: 32px;"
				src="../../static/img/to_api.png"></h2>
		<el-divider></el-divider>
		<!-- 组件源码 -->
		<h3 data-v-e74a3c6e="">组件源码</h3>
		<folding-panel @close="jump('code1')" id="code1">
			<div id="">
				<p class="describe">
					在 <span class="parameter">components</span> 文件夹下创建名字为 <span class="parameter">dev-ruler</span>
					的文件夹，用来存放当前组件。
				</p>
				<p class="describe">
					在 <span class="parameter">dev-ruler</span> 文件夹下创建 <span class="parameter">dev-ruler.vue</span>
					将以下代码复制进去。
				</p>
			</div>
			<dev-highlightjs autodetect :code="interfaceData.basic_examples"></dev-highlightjs>
		</folding-panel>
		<!-- 基本使用 -->
		<h3 data-v-e74a3c6e="">基本使用</h3>
		<div id="">
			<p class="describe">
				根据源码引入完毕后，直接在界面中使用，默认导航名称展示为返回。
			</p>
			<dev-highlightjs autodetect :code="interfaceData.default_use"></dev-highlightjs>
		</div>

		<h3 id="api" data-v-e74a3c6e="">API</h3>
		<dev-table mode="Props" :data="tableData"></dev-table>
		<dev-table mode="Event" :data="eventData"></dev-table>
	</div>
</template>

<script>
	import exampleData from './example.js'
	export default {
		created() {
			this.interfaceData = exampleData;
		},
		data() {
			return {
				interfaceData: {}, //界面数据
				tableData: [{
						parameter: 'width', //参数
						explain: '刻度尺宽度', //说明
						type: 'String | Number', //类型
						defaultValue: '100%', //默认值
						optionalValue: '单位rpx', //可选值
					}, {
						parameter: 'height', //参数
						explain: '刻度尺高度', //说明
						type: 'String | Number', //类型
						defaultValue: '90', //默认值
						optionalValue: '--', //可选值
					}, {
						parameter: 'background', //参数
						explain: '刻度尺背景颜色', //说明
						type: 'String', //类型
						defaultValue: '#fff', //默认值
						optionalValue: '--', //可选值
					},
					{
						parameter: 'radius',
						explain: '刻度尺边框圆角',
						type: 'String | Number',
						defaultValue: '90',
						optionalValue: '--',
					},
					{
						parameter: 'both-sides-width',
						explain: '刻度尺两边遮盖刻度的盒子宽度',
						type: 'String | Number',
						defaultValue: '40',
						optionalValue: '--',
					},
					{
						parameter: 'both-sides-color',
						explain: '刻度尺两边遮盖刻度的盒子颜色',
						type: 'String',
						defaultValue: '#fff',
						optionalValue: '--',
					},
					{
						parameter: 'min-num',
						explain: '刻度尺最小值',
						type: 'Number',
						defaultValue: '0',
						optionalValue: '--',
					},
					{
						parameter: 'max-num',
						explain: '刻度尺最大值',
						type: 'Number',
						defaultValue: '100',
						optionalValue: '--',
					},
					{
						parameter: 'initial-value',
						explain: '刻度尺初始值',
						type: 'Number',
						defaultValue: '0',
						optionalValue: '--',
					},
					{
						parameter: 'decimal',
						explain: '刻度尺显示几位小数，0不显示，1一位小数，2两位小数 依次类推',
						type: 'Number',
						defaultValue: '0',
						optionalValue: '--',
					},
					{
						parameter: 'quarter-interval',
						explain: '刻度数间隔几个刻度尺显示，默认10个',
						type: 'Number',
						defaultValue: '10',
						optionalValue: '--',
					},
					{
						parameter: 'active-scale-thickness',
						explain: '激活的刻度线粗细 默认2px',
						type: 'Number',
						defaultValue: '2',
						optionalValue: '--',
					},
					{
						parameter: 'scale-thickness',
						explain: '未激活刻度线粗细 默认2px',
						type: 'Number',
						defaultValue: '2',
						optionalValue: '--',
					},
					{
						parameter: 'active-scale-height',
						explain: '激活刻度线高度',
						type: 'String | Number',
						defaultValue: '40',
						optionalValue: '--',
					},
					{
						parameter: 'inactive-scale-height',
						explain: '未激活刻度线高度',
						type: 'String | Number',
						defaultValue: '30',
						optionalValue: '--',
					},
					{
						parameter: 'scale-interval',
						explain: '刻度线之间的距离 默认10px',
						type: 'Number',
						defaultValue: '10',
						optionalValue: '--',
					},
					{
						parameter: 'font-size',
						explain: '刻度值文字号大小',
						type: 'String | Number',
						defaultValue: '22',
						optionalValue: '--',
					},
					{
						parameter: 'activate-text-color',
						explain: '激活的刻度值文本颜色',
						type: 'String',
						defaultValue: '#2EA7E0',
						optionalValue: '--',
					},
					{
						parameter: 'inactive-text-color',
						explain: '未激活的刻度值文本颜色',
						type: 'String',
						defaultValue: '#000000',
						optionalValue: '--',
					},
					{
						parameter: 'active-color',
						explain: '激活的刻度线颜色',
						type: 'String',
						defaultValue: '#2EA7E0',
						optionalValue: '--',
					},
					{
						parameter: 'inactive-color',
						explain: '未激活的刻度线颜色',
						type: 'String',
						defaultValue: '#979797',
						optionalValue: '--',
					},
					{
						parameter: 'rolling-speed',
						explain: '刻度尺滑动速度，值越大滑动越慢，最小值为1',
						type: 'Number',
						defaultValue: '10',
						optionalValue: '--',
					},
					{
						parameter: 'scale-value',
						explain: '刻度线每格代表的值，默认刻度值为1；当为1位小数时刻度值为0.1；2位小数时刻度值为0.01依次类推',
						type: 'Number',
						defaultValue: '1',
						optionalValue: '--',
					},
				],
				eventData: [{
						parameter: 'v-model',
						explain: '当前选择的值',
						callback: '--'
					},
					{
						parameter: 'information',
						explain: '初次加载时会对外抛出，导航栏整体高度（包括手机状态栏）px、导航栏高度（无状态栏高度）px',
						callback: `val:{navAllHeight,navHeight}`
					}
				]

				// {
				// 	parameter: '',
				// 	explain: '',
				// 	type: 'String',
				// 	defaultValue: '',
				// 	optionalValue: '',
				// }

			}
		},
		methods: {
			//优化跳转，缓慢滚动到指定位置
			async goAnchor(selector, method) {
				/*method 为字符串时,scrollIntoViewOptions只赋值behavior的参数,如需修改整,其他参数需传递object对象,
				可传参数如下:
				{
				    behavior: "auto"  | "instant" | "smooth",
				    block:    "start" | "end",
				} */
				let [dataType, scrollIntoViewOptions] = [false, {
					behavior: 'instant'
				}];
				//判断是否传递跳转方法
				if (method) {
					dataType = Object.prototype.toString.call(method) === '[object Object]';
					if (dataType) {
						scrollIntoViewOptions = method;
					} else {
						scrollIntoViewOptions.behavior = method;
					}
				}
				let anchor = await new Promise((resolve, reject) => {
					return resolve(this.$el.querySelector(selector)) // 获取元素
				})
				if (anchor) {
					anchor.scrollIntoView(scrollIntoViewOptions) // js的内置方法，可滚动视图位置至元素位置
				}
			},
			//进行跳转到指定 id 元素
			jump(val, method) { // 点击跳转的方法 val 你定义的需要跳转的标签id 此方法可以根据自己的实际情况编辑
				this.goAnchor('#' + val, method)
			}

		}

	}
</script>

<style>

</style>
